<script setup lang="ts">
import { getMemberAddressByIdAPI, postMemberAddressAPI, putMemberAddressByIdAPI } from '@/services/address'
import { useAddressStore } from '@/stores/modules/address'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

const props = defineProps<{
  id?: string
  from?: string
}>()
uni.setNavigationBarTitle({
  title: props.id ? '修改地址' : '新增地址',
})

// 表单数据
const form = ref({
  receiver: '', // 收货人
  contact: '', // 联系方式
  fullLocation: '', // 省市区(前端展示)
  provinceCode: '', // 省份编码(后端参数)
  cityCode: '', // 城市编码(后端参数)
  countyCode: '', // 区/县编码(后端参数)
  address: '', // 详细地址
  isDefault: 0, // 默认地址，1为是，0为否
})

// 收集省市区数据
const onPickerChange: UniHelper.RegionPickerOnChange = (e) => {
  const { value, code } = e.detail
  form.value.fullLocation = value.join(' ')
  form.value.provinceCode = code![0]
  form.value.cityCode = code![1]
  form.value.countyCode = code![2]
}
// 收集是否默认地址
const onSwitchChange: UniHelper.SwitchOnChange = (e) => {
  form.value.isDefault = e.detail.value ? 1 : 0
}

// 表单校验 // 知识点[uniapp的表单校验]:可以使用uni-forms等第三方库,实现,本项目为了简单,就手写了
const validate = () => {
  // 收货人
  if (!form.value.receiver) {
    uni.showToast({
      title: '请填写收货人姓名',
      icon: 'none',
    })
    return false
  }
  // 联系方式
  const phoneRegex = /^1[2-9]\d{9}$/
  if (!phoneRegex.test(form.value.contact)) {
    uni.showToast({
      title: '请填写正确的手机号码',
      icon: 'none',
    })
    return false
  }
  // 省市区
  if (!form.value.fullLocation) {
    uni.showToast({
      title: '请选择省/市/区(县)',
      icon: 'none',
    })
    return false
  }
  // 详细地址
  if (!form.value.address) {
    uni.showToast({
      title: '请填写详细地址',
      icon: 'none',
    })
    return false
  }
  return true
}

// 提交表单
const onSubmit = async () => {
  if (!validate()) {
    return
  }
  if (props.id) {
    // 修改
    await putMemberAddressByIdAPI(props.id, form.value)
  } else {
    const res = await postMemberAddressAPI(form.value)

    // 如果是从商品页跳转过来的,则直接设置当前新增的地址为选中地址
    if (props.from == "'goods'") {
      //知识点【小程序地址栏传参】：地址栏传参会自动把goods变为'goods'字符串,比较的时候要带上''
      const addressItem = await getMemberAddressByIdAPI(res.result.id)
      const addressStore = useAddressStore()
      addressStore.setSelectedAddress(addressItem.result)
    }
  }

  uni.showToast({
    title: '保存成功',
    icon: 'success',
  })
  setTimeout(() => {
    // 知识点[页面返回与跳转]: 返回并刷新,推荐多使用navigateBack,避免页面的堆栈过多,因为它是关闭当前页面,再返回到上一个页面
    uni.navigateBack()
    // uni.navigateTo({ url: '/pagesMember/address/address' })
  }, 400)
}

// 获取地址详情
const getMemberAddressById = async () => {
  if (!props.id) {
    return
  }
  const res = await getMemberAddressByIdAPI(props.id)
  // 知识点[合并数据对象,重点!!!]: assign合并所有对象的属性到第一个参数对象里,已存在的属性会被覆盖,最常见的场景是:接口返回数据填充到表单
  // 注意:assign是浅拷贝,如果有嵌套对象,使用JSON.parse(JSON.stringify(res.result))或者lodash.cloneDeep
  Object.assign(form.value, res.result)
}

onLoad(async () => {
  getMemberAddressById()
})
</script>

<template>
  <view class="content">
    <form>
      <!-- 表单内容 -->
      <view class="form-item">
        <text class="label">收货人</text>
        <input class="input" placeholder="请填写收货人姓名" v-model="form.receiver" />
      </view>
      <view class="form-item">
        <text class="label">手机号码</text>
        <input class="input" :maxlength="11" placeholder="请填写收货人手机号码" v-model="form.contact" />
      </view>
      <view class="form-item">
        <text class="label">所在地区</text>
        <picker @change="onPickerChange" class="picker" mode="region" :value="form.fullLocation.split(' ')">
          <view v-if="form.fullLocation">{{ form.fullLocation }}</view>
          <view v-else class="placeholder">请选择省/市/区(县)</view>
        </picker>
      </view>
      <view class="form-item">
        <text class="label">详细地址</text>
        <input class="input" placeholder="街道、楼牌号等信息" v-model="form.address" />
      </view>
      <view class="form-item">
        <label class="label">设为默认地址</label>
        <switch @change="onSwitchChange" class="switch" color="#27ba9b" :checked="form.isDefault === 1" />
      </view>
    </form>
  </view>
  <!-- 提交按钮 -->
  <button class="button" @tap="onSubmit">保存并使用</button>
  <!-- 知识点[经验]:小程序开发中看vue响应式数据没那么方便,可以把对象直接展示到页面,这样就可以非常直观的查看响应式变化了 -->
  <!-- {{ form }} -->
</template>

<style lang="scss">
page {
  background-color: #f4f4f4;
}

.content {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;

  .form-item,
  .uni-forms-item {
    display: flex;
    align-items: center;
    min-height: 96rpx;
    padding: 25rpx 10rpx 40rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;
    margin-bottom: 0;

    .errorInfo {
    }

    // 调整 uni-forms 样式
    .uni-forms-item__content {
      display: flex;
    }

    .uni-forms-item__error {
      margin-left: 200rpx;
    }

    &:last-child {
      border: none;
    }

    .label {
      width: 200rpx;
      color: #333;
    }

    .input {
      flex: 1;
      display: block;
      height: 46rpx;
    }

    .switch {
      position: absolute;
      right: -20rpx;
      transform: scale(0.8);
    }

    .picker {
      flex: 1;
    }

    .placeholder {
      color: #808080;
    }
  }
}

.button {
  height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>
